import { useRequest } from 'ahooks'
import React from 'react'
import { getDoctorChatList } from '../../api'
import { ChatListState } from '../../types'
import { Cell, Image } from 'react-vant'
import { useNavigate } from 'react-router-dom'
const Index: React.FC = () => {
  const { data: chatList = [] } = useRequest(async () => {
    const resp = await getDoctorChatList()
    const data = resp.data.result.filter(v => v.status === 1)
    return data as ChatListState[];
  })
  const navigate = useNavigate();
  return (
    <div>
      <Cell.Group>
        {
          chatList.map(v => {
            return <Cell key={v.recordId} center
              title={v.nickName}
              label={v.lastContent}
              icon={<Image width={44} height={44} src={v.userHeadPic} round />}
              isLink
              onClick={() => navigate(`/chat/${v.recordId}/${v.userId}?user_nickname=${v.nickName}`)}
            ></Cell>
          })
        }
      </Cell.Group>
    </div>
  )
}

export default Index